<template>
    <div class="home">
        <my-head :isIndex="true"/>
        <full-scroll @pageChange="pageChange">
            <div class="item first-box">
                <first-content :show-video="first.showVideo" :emp-url="first.empUrl" :animation="animation[0]"/>
            </div>
            <div class="item second-box">
                <second-content :introduce="second.introduce" :animation="animation[1]"/>
            </div>
            <div class="item three-box">
                <three-content :animation="animation[2]" :business-area-list="three.businessAreaList"
                               :introduce="three.introduce" :title="three.title"/>
            </div>
            <div class="item four-box">
                <four-content :lawyer="four.lawyer" :animation="animation[3]" :content="four.content"
                              :title="four.title"/>
            </div>
            <div class="item eight-box">
                <eight-content/>
            </div>
            <div class="item five-box">
                <five-content :law-article-list="five.lawArticleList" :main-article="five.mainArticle"
                              :animation="animation[5]"/>
            </div>
            <div class="item six-box">
                <six-content :animation="animation[6]"/>
            </div>
            <div class="item seven-box">
                <seven-content :animation="animation[7]" :phone="seven.phone" :qrcode="seven.qrcode"/>
            </div>
        </full-scroll>
    </div>
</template>

<script>
import fullScroll from '@/components/full-scroll.vue'
import myHead from '@/components/header.vue'
import firstContent from '@/components/index/first.vue'
import secondContent from '@/components/index/second.vue'
import threeContent from '@/components/index/three.vue'
import fourContent from '@/components/index/four.vue'
import fiveContent from '@/components/index/five.vue'
import sixContent from '@/components/index/six.vue'
import sevenContent from '@/components/index/seven.vue'
import eightContent from '@/components/index/eight.vue'

export default {
    name: 'Home',
    components: {
        fullScroll,
        myHead,
        firstContent,
        secondContent,
        threeContent,
        fourContent,
        fiveContent,
        sixContent,
        sevenContent,
        eightContent,
    },
    data() {
        return {
            animation: [true, false, false, false, false, false, false, false],
            first: {
                showVideo: false,
                empUrl: ""
            },
            second: {
                introduce: ""
            },
            three: {
                title: '',
                introduce: '',
                businessAreaList: []
            },
            four: {
                lawyer: [],
                content: "",
                title: ''
            },
            five: {
                mainArticle: {},
                lawArticleList: []
            },
            seven: {
                phone: "",
                qrcode: ""
            },
            isPhone: false,
            indexShowVideo: false
        }
    },
    methods: {
        firstData(data) {
            let advertisingEntity = data.data.advertisingEntity;
            if (advertisingEntity) {
                if(advertisingEntity.video && !(screen.width <= 680)){
                    this.first.showVideo = true
                    this.first.empUrl = advertisingEntity.video
                }else if(!advertisingEntity.video&& screen.width <= 680){
                    this.first.showVideo = false
                    this.first.empUrl = advertisingEntity.img
                }
                else{
                    this.first.showVideo = false
                    this.first.empUrl = advertisingEntity.phoneImg
                }
                // this.first.showVideo = !(screen.width <= 680);
                //
                // this.first.empUrl = this.first.showVideo ? advertisingEntity.video : advertisingEntity.img;


                // this.first.showVideo = !!advertisingEntity.video;
                // this.first.empUrl = this.first.showVideo ? advertisingEntity.video : advertisingEntity.img;
            }
        },
        secondData(data) {
            let aboutUs = data.data.aboutUs;
            this.second.introduce = aboutUs.introduce;
        },

        threeData(data) {
            let aboutUs = data.data.aboutUs;
            this.three.title = aboutUs.businessAreaTitle
            this.three.introduce = aboutUs.businessAreaIntroduce
            this.three.businessAreaList = data.data.businessAreaList
        },
        fourData(data) {
            this.four.lawyer = data.data.lawerInfoList;
            this.four.content = data.data.aboutUs.teamIntroduce;
            this.four.title = data.data.aboutUs.teamTitle
        },
        fiveData(data) {
            let artList = data.data.lawArticleList;
            this.five.mainArticle = artList[0];
            this.five.mainArticle.content = this.five.mainArticle.content.replace(/<img.*?(?:>|\/>)/gi,'')
            console.log(this.five.mainArticle.content)
            this.five.lawArticleList = artList;
        },
        sevenData(data) {
            let aboutUs = data.data.aboutUs;
            this.seven.phone = aboutUs.ywPhone;
            this.seven.qrcode = aboutUs.qrCode;
            //console.log(this.seven)
        },
        pageChange(page) {
            if (this.isPhone) {
                return;
            }
            for (let i = 0; i < this.animation.length; i++) {
                this.animation[i] = false;
            }
            this.animation[page] = true;
        },
    },
    async mounted() {
        let data = await this.$http.get("/index/list")
        this.firstData(data);
        this.secondData(data);
        this.threeData(data);
        this.fourData(data);
        this.fiveData(data);
        this.sevenData(data);
        this.isPhone = screen.width <= 1600;
        if (this.isPhone) {
            for (let i = 0; i < this.animation.length; i++) {
                this.animation[i] = true;
            }
        }
    }
}
</script>

<style lang="less">
.home {
    height: 100%;

    .my-swipe {
        margin-top: 100px;
        height: calc(100% - 100px);
    }

    .van-swipe-item {
        .item {
            height: 100%;
        }
    }
}

.about-header {
    position: relative;
    height: 100px;
    color: #757575;
    width: 600px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    hr {
        height: 2px;
        background: #757575;
        top: calc(50% - 1px);
        width: 100%;
    }

    .title {
        padding: 10px 20px;
        z-index: 100;
        font-weight: bold;
        text-align: center;
        letter-spacing: 10px;
        width: 100%;

        .t1 {
        }
    }
}


</style>

